<template lang="">
    <div class="app-container">
        <!-- 顶部 Header 区域 -->
        <mt-header fixed title="电影预告">

        </mt-header>
        <!-- 内容 Contain 区域 -->
        <transition>
          <router-view></router-view>
        </transition>

        <!-- 尾部 footer 区域 -->
        <nav class="mui-bar mui-bar-tab">
          <router-link class="app-tab-item" 
           v-for="item in appTabbar" 
           :key='item.Link' 
           :to="item.Link"
           >
          	  <span class="mui-icon" :class="item.icon"></span>
          	  <span class="mui-tab-label">{{item.tabbar}}</span>
          </router-link>
		    </nav>
    </div>
</template>
<script>
import '../CSS/toggleTransition.css';
// 底部配置文件
import appTabbar from './footerTabbar.json';
export default {
  data() {
    return {
      appTabbar:appTabbar
    };
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  padding-top: 40px;
  padding-bottom: 30px;
  overflow-x: hidden; // 解决了导航切换 bug 1.
}

.v-enter {
    opacity: 0;
    transform: translateX(100%)
}
  
.v-leave-to {
    opacity: 0;
    transform: translateX(-100%); /* 解决了导航切换 bug 2.*/
    position: absolute;    /* 解决了导航切换 bug.3 */
}
  
.v-enter-active,
.v-leave-active {
    transition:all 0.5s ease;
}

// 解决类名冲突问题 修改mui-tab-item类名
.app-tab-item {
    display: table-cell;
    overflow: hidden;
    width: 1%;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
}

.app-tab-item.mui-active {
    color: #007aff;
}

.app-tab-item .mui-icon {
    top: 3px;
    width: 24px;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
}

.mui-bar-tab .app-tab-item .mui-icon~.mui-tab-label {
    font-size: 11px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>